<template>
  <div class="flex-1 h-full card_class">
    <div class="card_title">
      <span>{{ title }}</span>
      <div>
        <el-select
          v-model="searchParam.year"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '年'"
          class="w-[70px] mr-[10px]"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('YearList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="searchParam.month"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '月'"
          class="w-[50px]"
          :class="!panelSetIcon ? 'mr-[20px]' : ''"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('MonthList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div
      v-loading="loading"
      element-loading-background="transparent"
      class="echarts"
      style="height: calc(100% - 80px)"
    >
      <div class="flex items-center h-[10%] justify-center mt-[10px]">
        <el-radio-group
          v-model="radio_l"
          size="small"
          fill="#006DFB"
          class="ml-[10px]"
          @change="handleSearch"
        >
          <el-radio-button
            v-for="item in selectOption_l"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <ECharts
        v-if="option"
        :option="option"
        :id="`ProductionAttendanceHours` + props.id"
        ref="chart"
      />
    </div>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { qmsProjectTypeRejectList } from "@/assets/js/qms.ts";
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
import { LabelLayout } from "echarts/features";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, title } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  // year: "2025",
  // month: "2",
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

async function handleSearch() {
  reportData.value = null;
  reportData.value = null;
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  const { data } = await request({
    url: `/mes/mesplanstatistics/planViewAttendanceHours`,
    method: "post",
    data: {
      statisticsYear: searchParam.year,
      statisticsMoon: searchParam.month,
      statisticsState: radio_l.value,
    },
  }).finally(() => {
    loading.value = false;
  });
  reportData.value = data;
  //   reportData.value = qmsProjectTypeRejectList;
  setOptions();
  loading.value = false;
  //   nextTick(() => {
  //     setAnimation();
  //   });
}

const option = ref();
const chart = ref();
function setOptions() {
  option.value = {
    backgroundColor: "transparent",
    title: [
      {
        show: true,
        text: reportData.value?.notes || "",
        left: "center",
        top: "2%",
        // textAlign: "center",
        textStyle: {
          fontSize: 15,
          color: isDarkMode(routeName) ? "rgb(255,255,255)" : "#333",
        },
      },
    ],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)",
      borderColor: "transparent",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "rgba(0,0,0,.5)",
          fontFamily: "DINLight",
        },
      },
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
      formatter: (params: any) => {
        var relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            " " +
            params[i].seriesName +
            "  " +
            (params[i]?.value + "h" || "-");
        }
        return relVal;
      },
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: reportData.value?.xdata || [],
      axisLine: {
        lineStyle: {
          color: "#cdd5e2",
        },
      },
      axisLabel: {
        color: isDarkMode(routeName) ? "#eeeeee" : "#666",
        fontSize: isDarkMode(routeName) ? 13 : 12,
      },
    },

    yAxis: [
      {
        type: "value",
        name: "",
        // splitLine: {
        //   show: false,
        // },
        nameTextStyle: {
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: isDarkMode(routeName)
              ? "rgba(255,255,255,.1)"
              : "rgba(0,0,0,.12)",
            type: "dashed",
          },
        },
        axisLabel: {
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 12,
          formatter: "{value}h", //右侧Y轴文字显示
        },
        axisLine: {
          lineStyle: {
            color: "#cdd5e2",
          },
        },
      },
    ],
    series: [
      {
        name: "人工工时",
        type: "bar",
        barMaxWidth: "70px",
        itemStyle: {
          color: "rgb(36, 120, 242)",
          borderRadius: 0,
        },
        data: reportData.value?.ydata || [],
        label: {
          show: false,
          formatter: "{c}",
          fontSize: isDarkMode(routeName) ? 13 : 12,
          position: "top",
        },
      },
    ],
  };
}
const radio_l = ref("1");
const selectOption_l = [
  {
    label: "清理打磨",
    value: "1",
  },
  {
    label: "终检",
    value: "2",
  },
];

// 时  1：X光、2：冲床、3：人工打磨（冲床）、4：自动打磨
const loading = ref(false);
onMounted(() => {
  handleSearch();
  window.addEventListener("session-storage-updated", onSessionStorageChange);
});
onBeforeUnmount(() => {
  window.removeEventListener("session-storage-updated", onSessionStorageChange);
});
function onSessionStorageChange(event: any) {
  if (event.key === "month") {
    searchParam.month = JSON.parse(sessionStorage.getItem("month"));
    handleSearch();
  }
  if (event.key === "year") {
    searchParam.year = JSON.parse(sessionStorage.getItem("year"));
    handleSearch();
  }
}
</script>

<style lang="scss" scoped>
.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
